<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/assets/view/base/tag.jsp" %>
<!DOCTYPE html>
<head>
    <jsp:include page="/assets/view/common/head-meta.jsp"/>
    <title>mrcode博客,纯markdown程序员博客,博文列表</title>
    <jsp:include page="/assets/view/common/head-ui.jsp"/>
</head>
<body>
<jsp:include page="/assets/view/common/header.jsp"/>
<jsp:include page="/assets/view/common/header-user.jsp"/>
<div class="container">

    <%-- <link rel="stylesheet" href="/assets/lib/bootstrap/css/bootstrap.css">--%>
    <div class="row">
        <div class="col-lg-9">
            <div class="row">
                <ol class="breadcrumb">
                    <li class="active">文章列表</li>
                </ol>
                <div class="tagname-wrapper tag-list">
                    <a  href="/${user.account}/article/category/all" alt="所有文章" class="label label-success"
                        data-mc-catId="all">
                        <span> 所有文章</span><span class="badge">${user.blogConfig.articleNum}</span>
                    </a>
                    <c:if test="${categorys != null && categorys.size() > 0}">
                        <c:forEach items="${categorys }" var="category" varStatus="index">
                            <a  href="/${user.account}/article/category/${category.id}" alt="${category.name}" class="label label-success"
                                data-mc-catId="${category.id}">
                                <span> ${category.name}</span><span class="badge">${category.num}</span>
                            </a>
                        </c:forEach>
                    </c:if>
                </div>
                <c:forEach items="${articlePage.results }" var="article" varStatus="index">
                    <div class="col-lg-12">
                        <article class="media art-list-box art-fade">
                            <div class="media-left">
                                <a href="/${article.userAccount}/article/details/${article.id}.html">
                                    <c:choose>
                                        <c:when test="${article.summaryImg != null && article.summaryImg != ''}">
                                            <img class="media-object"
                                                 src="${article.summaryImg}" <%--style="background-image:url(${article.summaryImg})--%>/>
                                        </c:when>
                                        <c:otherwise>
                                            <img class="media-object" src="/assets/common/image/art-defult.png" alt="${article.title}"/>
                                        </c:otherwise>
                                    </c:choose>
                                </a>
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">
                                    <a href="/${article.userAccount}/article/details/${article.id}.html"
                                       title="${article.title}">${article.title}</a>
                                </h4>

                                <div class="summary">${article.summary}</div>

                                <ul class="list-inline autor">
                                        <%--<li><span class="icon-comments"/> ${article.commentNum}</li>--%>
                                    <li><span class="icon-user"/> ${article.userAccount}</li>
                                    <li><span class="icon-eye-open"/> ${article.readNum}</li>

                                    <li><span class="icon-time"/><fmt:formatDate value="${article.createTime}" pattern="yyyy-MM-dd"/>
                                    </li>
                                </ul>
                            </div>
                        </article>
                        <hr class="section-divider art-list-box-bottom">
                    </div>
                </c:forEach>
                <nav id="fenye" fenye="bootstrap" style="text-align: center">
                    ${articlePage.getBootstrapHtml(10)}
                </nav>
                <form id="listFrom" action="" method="post">
                    <input type="hidden" id="hi_pageNo" name="pageNo">
                </form>
            </div>
        </div>
        <div class="col-lg-3">
            <jsp:include page="/assets/view/common/left.jsp"/>
        </div>
    </div>
</div>
<jsp:include page="/assets/view/common/footer.jsp"/>
<script src="/assets/js/usersCommon.js"></script>
<script src="/assets/js/fenye.js"></script>
<script src="/assets/js/side.js"></script>
<script>
    $("#menu-list").addClass("active");
    side.userReadTopArticles('${account}');
    side.userCategorys('${account}');
    side.topReadArticles();
    $("#fenye").bindFanYeEvent(function(pageno){ //绑定点击翻页按钮的处理事件
        $("#hi_pageNo").val(pageno);
        $("#listFrom").submit();
    });
    $("a[data-mc-catId=\""+'${catId}'+"\"]").css({"background-color":"#151514"});
</script>
</body>
</html>
